<template>
    <div class="page">
        <!-- 资金费率评分表 -->
        <div class="card-container">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <div class="card-header-left">
                            <span class="card-title">资金费率评分</span>
                        </div>
                        <div class="card-header-right">
                            <el-button size="small" @click="fetchFundingRateScores">⟲ 刷新</el-button>
                        </div>
                    </div>
                </template>

                <!-- 状态展示 -->
                <div v-if="fundingLoading" class="loading-container">
                    <el-skeleton :rows="5" animated />
                </div>

                <div v-else-if="fundingError" class="error-container">
                    <el-alert :title="fundingError" type="error" show-icon :closable="false" />
                    <el-button type="primary" @click="fetchFundingRateScores">重试</el-button>
                </div>

                <!-- 表格 -->
                <el-table v-else v-loading="fundingLoading" :data="filteredFundingData" style="width: 100%"
                    max-height="600" border size="default" :row-class-name="fundingRowClassName" stripe>
                    <template #empty>
                        <el-empty description="暂无数据" :image-size="80" />
                    </template>

                    <el-table-column prop="symbol" label="交易对" width="160">
                        <template #default="scope">
                            <el-tooltip class="item" effect="dark" :content="scope.row.symbol" placement="top">
                                <span class="mono">{{ scope.row.symbol }}</span>
                            </el-tooltip>
                        </template>
                    </el-table-column>

                    <el-table-column prop="exchange" label="交易所" width="120">
                        <template #default="scope">
                            <el-tooltip :content="scope.row.exchange" placement="top">
                                <span>{{ scope.row.exchange }}</span>
                            </el-tooltip>
                        </template>
                    </el-table-column>

                    <el-table-column prop="funding_rate" label="资金费率" width="150">
                        <template #default="scope">
                            <span
                                :class="{ 'text-negative': scope.row.funding_rate < 0, 'text-positive': scope.row.funding_rate > 0 }">
                                {{ scope.row.funding_rate }}
                            </span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="annual_rate" label="年化" width="130" />

                    <el-table-column prop="final_score" label="评分" width="140" sortable>
                        <template #default="scope">
                            <span :class="{
                                'score-high': scope.row.final_score >= 70,
                                'score-medium': scope.row.final_score >= 40 && scope.row.final_score < 70,
                                'score-low': scope.row.final_score < 40
                            }">
                                {{ scope.row.final_score }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="score_rate_absolute" label="绝对得分率" width="120" />
                    <el-table-column prop="score_rate_stability" label="稳定得分率" width="120" />
                    <el-table-column prop="score_rate_difference" label="得分率差异" width="120" />
                    <el-table-column prop="score_historical_performance" label="历史表现得分" width="120" />
                    <el-table-column prop="score_liquidity" label="流动性分" width="110" class-name="hide-sm" />
                    <el-table-column prop="score_rate_stability" label="费率稳定性" width="120" class-name="hide-sm" />
                    <el-table-column label="操作" width="100" fixed="right">
                        <template #default="scope">
                            <el-button type="primary" size="small" @click="viewFundingHistory(scope.row)">查看</el-button>
                        </template>
                    </el-table-column>

                </el-table>

                <!-- 分页 -->
                <div class="pagination-container">
                    <el-pagination v-model:current-page="fundingCurrentPage" v-model:page-size="fundingPageSize"
                        :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
                        :total="fundingRateScores.total" @size-change="handleFundingSizeChange"
                        @current-change="handleFundingCurrentChange" :locale="elementLocale" />
                </div>
            </el-card>
        </div>

        <!-- 价差套利评分表 -->
        <div class="card-container">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <div class="card-header-left">
                            <span class="card-title">价差套利评分</span>
                        </div>
                        <div class="card-header-right">
                            <el-button size="small" @click="fetchSpreadArbitrageScores">⟲ 刷新</el-button>
                        </div>
                    </div>
                </template>

                <div v-if="spreadLoading" class="loading-container">
                    <el-skeleton :rows="5" animated />
                </div>

                <div v-else-if="spreadError" class="error-container">
                    <el-alert :title="spreadError" type="error" show-icon :closable="false" />
                    <el-button type="primary" @click="fetchSpreadArbitrageScores">重试</el-button>
                </div>

                <el-table v-else v-loading="spreadLoading" :data="filteredSpreadData" style="width: 100%"
                    max-height="600" border size="default" :row-class-name="spreadRowClassName" stripe>
                    <template #empty>
                        <el-empty description="暂无数据" :image-size="80" />
                    </template>

                    <el-table-column prop="symbol" label="交易对" width="120">
                        <template #default="scope">
                            <el-tooltip class="item" effect="dark" :content="scope.row.symbol" placement="top">
                                <span class="mono">{{ scope.row.symbol }}</span>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="exchanges" label="交易所对" width="180">
                        <template #default="scope">
                            <el-tooltip :content="scope.row.exchanges" placement="top">
                                <span class="muted truncate">{{ scope.row.exchanges }}</span>
                            </el-tooltip>
                        </template>
                    </el-table-column>

                    <el-table-column prop="final_score" label="评分" width="120" sortable>
                        <template #default="scope">
                            <span :class="{
                                'score-high': scope.row.final_score >= 70,
                                'score-medium': scope.row.final_score >= 40 && scope.row.final_score < 70,
                                'score-low': scope.row.final_score < 40
                            }">
                                {{ scope.row.final_score }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="score_liquidity" label="流动性得分" width="120" />
                    <el-table-column prop="score_reversion_amplitude" label="回归幅度得分" width="140" />
                    <el-table-column prop="score_reversion_speed" label="回归速度得分" width="140" />
                    <el-table-column prop="score_funding_rate" label="资金费率得分" width="135" />
                    <el-table-column prop="score_basis_stability" label="稳定性得分" width="120" />
                    <el-table-column prop="spread_mean" label="平均价差" width="120" class-name="hide-sm">
                        <template #default="scope">
                            <span
                                :class="{ 'text-negative': scope.row.spread_mean < 0, 'text-positive': scope.row.spread_mean > 0 }">
                                {{ scope.row.spread_mean ? Number(scope.row.spread_mean).toFixed(4) : '-' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="spread_std" label="价差标准差" width="120" class-name="hide-sm" />
                    <el-table-column prop="spread_mean" label="平均价差" width="120" class-name="hide-sm" />
                    <el-table-column prop="grade" label="评级" width="140" />

                    <el-table-column label="操作" width="100" fixed="right">
                        <template #default="scope">
                            <el-button type="primary" size="small" @click="viewSpreadHistory(scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="pagination-container">
                    <el-pagination v-model:current-page="spreadCurrentPage" v-model:page-size="spreadPageSize"
                        :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
                        :total="spreadArbitrageScores.total" @size-change="handleSpreadSizeChange"
                        @current-change="handleSpreadCurrentChange" :locale="elementLocale" />
                </div>
            </el-card>
        </div>

        <!-- 资金费率历史弹窗 -->
        <el-dialog v-model="fundingHistoryVisible" title="资金费率历史评分" :width="dialogWidth"
            :before-close="handleFundingHistoryClose">
            <div v-if="fundingHistoryLoading" class="loading-container">
                <el-skeleton :rows="5" animated />
            </div>
            <div v-else-if="fundingHistoryError" class="error-container">
                <el-alert :title="fundingHistoryError" type="error" show-icon :closable="false" />
                <el-button type="primary" @click="fetchFundingHistory">重试</el-button>
            </div>
            <el-table v-else :data="fundingHistoryData" style="width: 100%" border size="default" stripe>
                <template #empty>
                    <el-empty description="暂无历史数据" :image-size="80" />
                </template>
                <el-table-column prop="symbol" label="交易对" width="160">
                    <template #default="scope">
                        <el-tooltip class="item" effect="dark" :content="scope.row.symbol" placement="top">
                            <span class="mono">{{ scope.row.symbol }}</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="exchange" label="交易所" width="120" />
                <el-table-column prop="previous_final_score" label="之前评分" width="120" />
                <el-table-column prop="current_final_score" label="当前评分" width="120" />
                <el-table-column prop="score_change" label="评分变化" width="120">
                    <template #default="scope">
                        <span
                            :class="{ 'text-positive': scope.row.score_change > 0, 'text-negative': scope.row.score_change < 0 }">
                            {{ scope.row.score_change > 0 ? '+' : '' }}{{ scope.row.score_change }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="previous_funding_rate" label="之前资金费率" width="145">
                    <template #default="scope">
                        <span
                            :class="{ 'text-negative': scope.row.previous_funding_rate && scope.row.previous_funding_rate < 0, 'text-positive': scope.row.previous_funding_rate && scope.row.previous_funding_rate > 0 }">
                            {{ scope.row.previous_funding_rate }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="current_funding_rate" label="当前资金费率" width="145">
                    <template #default="scope">
                        <span
                            :class="{ 'text-negative': scope.row.current_funding_rate < 0, 'text-positive': scope.row.current_funding_rate > 0 }">
                            {{ scope.row.current_funding_rate }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="change_reason" label="变更原因" width="230" />
                <el-table-column prop="created_at" label="创建时间" width="250">
                    <template #default="scope">
                        {{ formatDateTime(scope.row.created_at) }}
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

        <!-- 价差套利历史弹窗 -->
        <el-dialog v-model="spreadHistoryVisible" title="价差套利历史评分" :width="dialogWidth"
            :before-close="handleSpreadHistoryClose">
            <div v-if="spreadHistoryLoading" class="loading-container">
                <el-skeleton :rows="5" animated />
            </div>
            <div v-else-if="spreadHistoryError" class="error-container">
                <el-alert :title="spreadHistoryError" type="error" show-icon :closable="false" />
                <el-button type="primary" @click="fetchSpreadHistory">重试</el-button>
            </div>
            <el-table v-else :data="spreadHistoryData" style="width: 100%" border size="default" stripe>
                <template #empty>
                    <el-empty description="暂无历史数据" :image-size="80" />
                </template>
                <el-table-column prop="symbol" label="交易对" width="160">
                    <template #default="scope">
                        <el-tooltip class="item" effect="dark" :content="scope.row.symbol" placement="top">
                            <span class="mono">{{ scope.row.symbol }}</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="exchanges" label="交易所对" width="160" />
                <el-table-column prop="previous_final_score" label="之前评分" width="120" />
                <el-table-column prop="current_final_score" label="当前评分" width="120" />
                <el-table-column prop="score_change" label="评分变化" width="120">
                    <template #default="scope">
                        <span
                            :class="{ 'text-positive': scope.row.score_change > 0, 'text-negative': scope.row.score_change < 0 }">
                            {{ scope.row.score_change > 0 ? '+' : '' }}{{ scope.row.score_change }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="change_reason" label="变更原因" width="200" />
                <el-table-column prop="created_at" label="创建时间" width="250">
                    <template #default="scope">
                        {{ formatDateTime(scope.row.created_at) }}
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue';
import { ElMessage } from 'element-plus';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import {
    getFundingRateScores,
    getFundingRateHistory,
    getSpreadArbitrageScores,
    getSpreadArbitrageHistory
} from '../../services/api/Scoring/scoring';

interface FundingRateScore {
    id: number;
    symbol: string;
    exchange: string;
    funding_rate: number;
    annual_rate: number;
    final_score: number;
    grade: string;
    recommendation: string;
    score_rate_absolute: number;
    score_rate_stability: number;
    score_liquidity: number;
    score_rate_difference: number;
    score_holding_cost: number;
    score_historical_performance: number;
    score_success_rate: number;
    initial_success_rate: number;
    bayesian_success_rate: number;
    actual_success_rate: number | null;
    total_orders: number;
    success_orders: number;
    confidence_level: string;
    confidence_lower: number | null;
    confidence_upper: number | null;
    prior_weight: number;
    expected_real_return: number;
    cost_adjusted_return: number;
    strategy_type: string;
    strategy_description: string;
    score_date: string;
    created_at: string;
    updated_at: string;
}

interface SpreadArbitrageScore {
    id: number;
    symbol: string;
    exchanges: string;
    final_score: number;
    grade: string;
    recommendation: string;
    score_position_balance: number;
    score_liquidity: number;
    score_reversion_speed: number;
    score_reversion_amplitude: number;
    score_funding_rate: number;
    score_basis_stability: number;
    score_success_rate: number;
    initial_success_rate: number;
    bayesian_success_rate: number;
    actual_success_rate: number | null;
    total_orders: number;
    success_orders: number;
    confidence_level: string;
    expected_real_return: number;
    spread_mean: number;
    spread_std: number;
    funding_rate_ex1: number;
    funding_rate_ex2: number;
    funding_rate_diff: number;
    annual_rate_ex1: number | null;
    annual_rate_ex2: number | null;
    basis_direction: string | null;
    basis_stability_score: number | null;
    score_date: string;
    created_at: string;
    updated_at: string;
}

interface FundingHistoryScore {
    id: number;
    symbol: string;
    exchange: string;
    previous_final_score: number;
    current_final_score: number;
    score_change: number;
    previous_success_rate: number;
    current_success_rate: number;
    success_rate_change: number;
    previous_funding_rate: number | null;
    current_funding_rate: number;
    change_reason: string;
    change_type: string;
    is_significant: number;
    created_at: string;
}

interface SpreadHistoryScore {
    id: number;
    symbol: string;
    exchanges: string;
    previous_final_score: number;
    current_final_score: number;
    score_change: number;
    previous_success_rate: number;
    current_success_rate: number;
    success_rate_change: number;
    change_reason: string;
    change_type: string;
    is_significant: number;
    created_at: string;
}

const fundingRateScores = reactive({
    total: 0,
    count: 0,
    limit: 0,
    offset: 0,
    data: [] as FundingRateScore[]
});
const fundingLoading = ref(false);
const fundingError = ref('');
const fundingCurrentPage = ref(1);
const fundingPageSize = ref(100);

const spreadArbitrageScores = reactive({
    total: 0,
    count: 0,
    limit: 0,
    offset: 0,
    data: [] as SpreadArbitrageScore[]
});
const spreadLoading = ref(false);
const spreadError = ref('');
const spreadCurrentPage = ref(1);
const spreadPageSize = ref(100);

/* 历史弹窗 */
const fundingHistoryVisible = ref(false);
const spreadHistoryVisible = ref(false);
const selectedFundingItem = ref<FundingRateScore | null>(null);
const selectedSpreadItem = ref<SpreadArbitrageScore | null>(null);

const fundingHistoryData = ref<FundingHistoryScore[]>([]);
const spreadHistoryData = ref<SpreadHistoryScore[]>([]);
const fundingHistoryLoading = ref(false);
const spreadHistoryLoading = ref(false);
const fundingHistoryError = ref('');
const spreadHistoryError = ref('');

/* 顶部搜索 / 过滤 */
const keyword = ref('');

/* 弹窗宽度（响应式） */
const dialogWidth = computed(() => (window.innerWidth < 600 ? '80%' : '75%'));

// Element Plus 组件语言配置，设置为中文
const elementLocale = zhCn;


const formatDateTime = (dateString: string | undefined) => {
    if (!dateString) return '-';
    try {
        const date = new Date(dateString);
        // 格式化日期时间为更友好的格式：年-月-日 时:分:秒
        return date.toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
            hour12: false
        });
    } catch {
        return dateString;
    }
};



const fetchFundingRateScores = async () => {
    // 防止重复请求
    if (fundingLoading.value) return;

    fundingLoading.value = true;
    fundingError.value = '';
    try {
        const offset = (fundingCurrentPage.value - 1) * fundingPageSize.value;
        // 请求格式
        const params = { limit: fundingPageSize.value, offset };

        // 调用API - 使用POST请求接口 /scores/funding/query
        const response = await getFundingRateScores(params);

        const data = response as { total?: number; count?: number; limit?: number; offset?: number; data?: any[] };
        fundingRateScores.total = data.total || 0;
        fundingRateScores.count = data.count || 0;
        fundingRateScores.limit = data.limit || fundingPageSize.value;
        fundingRateScores.offset = data.offset || offset;
        fundingRateScores.data = Array.isArray(data.data) ? data.data : [];

    } catch (err) {
        const errorMsg = err instanceof Error ? err.message : '获取资金费率评分失败';
        fundingError.value = errorMsg;
        ElMessage.error(`获取资金费率评分失败: ${errorMsg}`);
        console.error('资金费率评分请求错误:', err);

        // 错误情况下重置数据
        fundingRateScores.data = [];
        fundingRateScores.total = 0;
        fundingRateScores.count = 0;
    } finally {
        fundingLoading.value = false;
    }
};

const fetchSpreadArbitrageScores = async () => {
    // 防止重复请求
    if (spreadLoading.value) return;

    spreadLoading.value = true;
    spreadError.value = '';
    try {
        const offset = (spreadCurrentPage.value - 1) * spreadPageSize.value;
        // 请求格式
        const params = { limit: spreadPageSize.value, offset };

        // 调用API - 使用POST请求接口 /scores/spread/query
        const response = await getSpreadArbitrageScores(params);

        // 根据接口返回示例结构直接更新数据
        const data = response as { total?: number; count?: number; limit?: number; offset?: number; data?: any[] };
        spreadArbitrageScores.total = data.total || 0;
        spreadArbitrageScores.count = data.count || 0;
        spreadArbitrageScores.limit = data.limit || spreadPageSize.value;
        spreadArbitrageScores.offset = data.offset || offset;
        spreadArbitrageScores.data = Array.isArray(data.data) ? data.data : [];

    } catch (err) {
        spreadError.value = err instanceof Error ? err.message : '获取价差套利评分失败';
        ElMessage.error(`获取价差套利评分失败: ${spreadError.value}`);
        console.error('价差套利评分请求错误:', err);

        // 错误情况下重置数据
        spreadArbitrageScores.data = [];
        spreadArbitrageScores.total = 0;
    } finally {
        spreadLoading.value = false;
    }
};

const fetchFundingHistory = async () => {
    if (!selectedFundingItem.value) return;
    fundingHistoryLoading.value = true;
    fundingHistoryError.value = '';
    try {
        const response = await getFundingRateHistory({
            symbol: selectedFundingItem.value.symbol,
            exchange: selectedFundingItem.value.exchange,
            days: 7
        });

        const historyData = response as { data?: any[] } | any[];

        if (Array.isArray(historyData)) {
            fundingHistoryData.value = historyData;
        } else if (historyData && Array.isArray(historyData.data)) {
            fundingHistoryData.value = historyData.data;
        } else {
            fundingHistoryData.value = [];
            console.warn('资金费率历史评分数据结构不符合预期:', response);
        }
    } catch (err) {
        fundingHistoryError.value = err instanceof Error ? err.message : '获取资金费率历史评分失败';
        ElMessage.error('获取资金费率历史评分失败');
        console.error('资金费率历史评分请求错误:', err);
    } finally {
        fundingHistoryLoading.value = false;
    }
};

const fetchSpreadHistory = async () => {
    if (!selectedSpreadItem.value) return;
    spreadHistoryLoading.value = true;
    spreadHistoryError.value = '';
    try {
        const response = await getSpreadArbitrageHistory({
            symbol: selectedSpreadItem.value.symbol,
            exchanges: selectedSpreadItem.value.exchanges,
            days: 7
        });

        const historyData = response as { data?: any[] } | any[];

        if (Array.isArray(historyData)) {
            spreadHistoryData.value = historyData;
        } else if (historyData && Array.isArray(historyData.data)) {
            spreadHistoryData.value = historyData.data;
        } else {
            spreadHistoryData.value = [];
            console.warn('价差套利历史评分数据结构不符合预期:', response);
        }
    } catch (err) {
        spreadHistoryError.value = err instanceof Error ? err.message : '获取价差套利历史评分失败';
        ElMessage.error('获取价差套利历史评分失败');
        console.error('价差套利历史评分请求错误:', err);
    } finally {
        spreadHistoryLoading.value = false;
    }
};

const viewFundingHistory = async (item: FundingRateScore) => {
    selectedFundingItem.value = item;
    fundingHistoryVisible.value = true;
    fundingHistoryData.value = [];
    await fetchFundingHistory();
};

const viewSpreadHistory = async (item: SpreadArbitrageScore) => {
    selectedSpreadItem.value = item;
    spreadHistoryVisible.value = true;
    spreadHistoryData.value = [];
    await fetchSpreadHistory();
};

const handleFundingHistoryClose = () => {
    fundingHistoryVisible.value = false;
    selectedFundingItem.value = null;
    fundingHistoryData.value = [];
};

const handleSpreadHistoryClose = () => {
    spreadHistoryVisible.value = false;
    selectedSpreadItem.value = null;
    spreadHistoryData.value = [];
};

const handleFundingSizeChange = (size: number) => {
    fundingPageSize.value = size;
    // 重置到第一页
    fundingCurrentPage.value = 1;
    // 重新加载数据
    fetchFundingRateScores();
};

const handleFundingCurrentChange = (current: number) => {
    fundingCurrentPage.value = current;
    // 重新加载数据
    fetchFundingRateScores();
};

const handleSpreadSizeChange = (size: number) => {
    spreadPageSize.value = size;
    // 重置到第一页
    spreadCurrentPage.value = 1;
    // 重新加载数据
    fetchSpreadArbitrageScores();
};

const handleSpreadCurrentChange = (current: number) => {
    spreadCurrentPage.value = current;
    // 重新加载数据
    fetchSpreadArbitrageScores();
};

/* 行样式 */
const fundingRowClassName = ({ row }: { row: FundingRateScore }) => {
    if (!row) return '';
    if (row.final_score >= 70) return 'score-high-row';
    if (row.final_score >= 40) return 'score-medium-row';
    return 'score-low-row';
};
const spreadRowClassName = ({ row }: { row: SpreadArbitrageScore }) => {
    if (!row) return '';
    if (row.final_score >= 70) return 'score-high-row';
    if (row.final_score >= 40) return 'score-medium-row';
    return 'score-low-row';
};

/* 过滤（顶部搜索） */
const filteredFundingData = computed(() => {
    if (!keyword.value) return fundingRateScores.data;
    const k = keyword.value.toLowerCase();
    return fundingRateScores.data.filter((r) => {
        return (
            String(r.symbol ?? '').toLowerCase().includes(k) ||
            String(r.exchange ?? '').toLowerCase().includes(k) ||
            String(r.strategy_description ?? '').toLowerCase().includes(k)
        );
    });
});

const filteredSpreadData = computed(() => {
    if (!keyword.value) return spreadArbitrageScores.data;
    const k = keyword.value.toLowerCase();
    return spreadArbitrageScores.data.filter((r) => {
        return (
            String(r.symbol ?? '').toLowerCase().includes(k) ||
            String(r.exchanges ?? '').toLowerCase().includes(k)
        );
    });
});

/* 组件挂载拉取数据 */
onMounted(() => {
    // 使用顺序加载避免请求冲突
    fetchFundingRateScores().then(() => {
        setTimeout(() => {
            fetchSpreadArbitrageScores();
        }, 100);
    });
});

</script>

<style scoped>
.page {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: 100vh;
}

.card-container {
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    color: #1890ff;
}

:deep(.el-table) {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

:deep(.el-table th) {
    background-color: #fafafa !important;
    color: #262626 !important;
    font-weight: 600 !important;
    font-size: 14px;
    border-bottom: 2px solid #e8e8e8;
    height: 48px;
    padding: 0 12px;
}

:deep(.el-table tr) {
    height: 48px;
    transition: background-color 0.2s ease;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
    background-color: #fcfcfc !important;
}

:deep(.el-table__body tr:hover > td) {
    background-color: #f0f7ff !important;
}

.text-positive {
    color: #52c41a !important;
    font-weight: 500;
}

.text-negative {
    color: #ff4d4f !important;
    font-weight: 500;
}

:deep(.el-table-column__header--highlight),
:deep(.el-table__body td.final-score-cell),
:deep(.el-table__body td.expected-return-cell) {
    font-weight: 600;
    background-color: #f6ffed !important;
}

.mono {
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 500;
    color: #262626;
    font-size: 14px;
}

.pagination-container {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
    padding-right: 8px;
}

.loading-container {
    padding: 40px 0;
}

.error-container {
    padding: 20px;
    text-align: center;
}

.hide-sm {
    display: table-cell;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
}

:deep(.el-table__header-wrapper .el-table__header th) {
    position: relative;
}

:deep(.el-table__body td) {
    color: #595959;
    font-size: 14px;
    padding: 0 12px;
}

:deep(.el-dialog) {
    border-radius: 8px;
    overflow: hidden;
}

@media screen and (max-width: 768px) {
    .hide-sm {
        display: none;
    }

    .page {
        padding: 10px;
    }

    .card-title {
        font-size: 16px;
    }
}

:deep(.success-cell) {
    background-color: #f6ffed;
    border-color: #b7eb8f;
}

:deep(.warning-cell) {
    background-color: #fffbe6;
    border-color: #ffe58f;
}

:deep(.danger-cell) {
    background-color: #fff2f0;
    border-color: #ffccc7;
}

.score-high {
    color: #52c41a;
    font-weight: 600;
}

.score-medium {
    color: #faad14;
    font-weight: 600;
}

.score-low {
    color: #ff4d4f;
    font-weight: 600;
}

.row-caution {
    background: rgba(250, 230, 180, 0.18) !important;
}

.loading-container,
.error-container {
    padding: 16px;
}

.error-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.box-card {
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
    padding: 12px;
    background: #fff;
}

:deep(.el-dialog__body .el-table) {
    min-width: 900px;
}

:deep(.el-dialog__body .el-table th) {
    padding: 15px 12px;
    font-size: 16px;
    font-weight: 600;
    height: 50px;
}

:deep(.el-dialog__body .el-table td) {
    padding: 12px 12px;
    font-size: 15px;
    height: 45px;
}

:deep(.el-table .el-table__fixed-right .cell) {
    background: #fff;
}

:deep(.el-table) {
    width: 100%;
    display: block;
    overflow-x: auto;
}

.muted {
    color: #6b7280;
}

.score-high {
    color: #52c41a;
    font-weight: 600;
}

.score-medium {
    color: #faad14;
    font-weight: 600;
}

.score-low {
    color: #ff4d4f;
    font-weight: 600;
}

.score-high-row {
    background-color: #f6ffed;
}

.score-medium-row {
    background-color: #fffbe6;
}

.score-low-row {
    background-color: #fff2f0;
}

.score-high-row:hover>td {
    background-color: #e6f7ff !important;
}

.score-medium-row:hover>td {
    background-color: #fff1b8 !important;
}

.score-low-row:hover>td {
    background-color: #ffccc7 !important;
}

.el-table__body td:first-child {
    font-weight: 500;
    color: #1890ff;
}

.el-table__body td:nth-child(2) {
    color: #722ed1;
}

.el-table__body td.funding-rate-cell,
.el-table__body td.annual-rate-cell,
.el-table__body td.expected-return-cell {
    font-weight: 600;
    font-size: 15px;
}

.el-dialog :deep(.el-table__header th) {
    background-color: #fafafa !important;
    font-weight: 600 !important;
}

.el-dialog :deep(.el-table__body tr:hover > td) {
    background-color: #f0f7ff !important;
}
</style>
